<template>
  <div class="jsbos-common-layout">
    <div class="jsbos-common-layout-center">
      <div class="jsbos-common-layout-main jsbos-flex-main">
        <div class="systemConfig">
          <el-form
            ref="baseFormRef"
            :model="baseForm"
            :rules="rules"
            label-width="140px"
          >
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="CPU使用率(%)" prop="serviceCPU">
                  <el-input-number
                    v-model="baseForm.serviceCPU"
                    :min="1"
                    :max="100"
                    label="系统CPU资源可用值大于等于该值会触发告警"
                  ></el-input-number>
                  <!-- <el-input  v-model.number="baseForm.serviceCPU" :max="100" clearable placeholder="系统CPU资源可用值大于等于该值会触发告警" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/> -->
                  <i class="ym-custom ym-custom-information-variant"
                    >系统CPU资源可用值大于等于该值会触发告警</i
                  >
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="内存使用率(%)" prop="serviceMemory">
                  <el-input-number
                    v-model="baseForm.serviceMemory"
                    :min="1"
                    :max="100"
                    label="系统内存资源可用值大于等于该值会触发告警"
                  ></el-input-number>
                  <!-- <el-input v-model.number="baseForm.serviceMemory" :max="100" clearable placeholder="系统内存资源可用值大于等于该值会触发告警" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/> -->
                  <i class="ym-custom ym-custom-information-variant"
                    >系统内存资源可用值大于等于该值会触发告警</i
                  >
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="磁盘大小(G)" prop="serviceDisk">
                  <el-input-number
                    v-model="baseForm.serviceDisk"
                    :min="1"
                    :max="1000"
                    label="系统磁盘资源可用值小于等于该值会触发告警"
                  ></el-input-number>
                  <!-- <el-input v-model="baseForm.serviceDisk" clearable placeholder="系统磁盘资源可用值小于等于该值会触发告警" /> -->
                  <i class="ym-custom ym-custom-information-variant"
                    >系统磁盘资源可用值小于等于该值会触发告警</i
                  >
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="small"
                    class="saveBtn"
                    :loading="btnLoading"
                    @click="submitForm('ServiceAlertSysConfig')"
                    >保存</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getConfigListByCategory,
  updateSystemConfig,
} from "@/api/system/sysConfig";
export default {
  name: "ServiceAlertSysConfigSetting",
  components: {},
  props: {
    dataForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      btnLoading: false,
      baseForm: {
        serviceCPU: 90,
        serviceMemory: 90,
        serviceDisk: 10,
      },
      rules: {
        serviceCPU: [
          {
            required: true,
            message: "请设置CPU阈值",
            trigger: "blur",
          },
        ],
        serviceMemory: [
          {
            required: true,
            message: "请设置内存阈值",
            trigger: "blur",
          },
        ],
        serviceDisk: [
          {
            required: true,
            message: "请设置磁盘空间大小阈值",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dataForm() {
      this.baseForm = this.dataForm ? this.dataForm : this.baseForm;
    },
  },
  created() {
    this.initData();
  },
  computed: {
    SysConfig() {
      return {
        category: "ServiceAlertSysConfig",
        list: [
          {
            name: "CPU率",
            key: "serviceCPU",
            value: this.baseForm.serviceCPU,
          },
          {
            name: "内存率",
            key: "serviceMemory",
            value: this.baseForm.serviceMemory,
          },
          {
            name: "磁盘大小",
            key: "serviceDisk",
            value: this.baseForm.serviceDisk,
          },
        ],
      };
    },
  },
  methods: {
    initData() {
      getConfigListByCategory("ServiceAlertSysConfig")
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            this.baseForm[res.data[i].keyName] = res.data[i].keyValue;
          }
        })
        .catch(() => {
          this.sysConfigLoading = false;
        });
    },

    /**保存 */
    submitForm(category) {
      this.btnLoading = true;
      console.log("category", category);
      // 基础设置
      if (category == "ServiceAlertSysConfig") {
        updateSystemConfig(this.SysConfig)
          .then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.btnLoading = false;
                const ServiceAlertSysConfig = {
                  serviceCPU: this.baseForm.serviceCPU, // CPU率
                  serviceMemory: this.baseForm.serviceMemory, // 内存率
                  serviceDisk: this.baseForm.serviceDisk, // 磁盘大小
                };
                this.$store.commit("settings/CHANGE_SETTING", {
                  key: "ServiceAlertSysConfig",
                  value: ServiceAlertSysConfig,
                });
                this.$emit("refreshInit");
              },
            });
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.systemConfig {
  padding: 0;
  margin-top: 20px;
  width: 80%;

  .saveBtn {
    float: right;
    width: 100px;
  }

  .ym-custom {
    font-family: "ym-custom" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    color: #e6a23c;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
